<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩管理系统</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <!-- 登录界面 -->
    <div id="login-page" class="login-container">
        <h1>学生成绩管理系统</h1>
        <form id="login-form">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">登录</button>
        </form>
    </div>

    <!-- 主界面 -->
    <div id="main-page"  class="layout-container ">
        <div class="sidebar">
            <div class="sidebar-header">
                <span class="system-title">学生成绩管理系统</span>
            </div>
            <ul class="sidebar-menu">
                <li class="active" data-section="student-info">学生信息管理</li>
                <li data-section="course-info">课程信息管理</li>
                <li data-section="grade-entry">成绩录入</li>
                <li data-section="grade-query">成绩查询</li>
                <li data-section="statistics">统计分析</li>
                <li data-section="teacher-info">教师信息管理</li>
                <li data-section="user-info">用户管理</li>
            </ul>
            <div class="sidebar-footer">
                <button id="logout-btn">退出登录</button>
            </div>
        </div>


        <div class="main-content">
            <!-- 头部信息 -->
            <header>
                <span>欢迎您使用学生成绩管理系统</span>
                <span class="current-date"></span>
            </header>
            <main>
                <!-- 下面的 section 保持原有内容，但都加上 class="module-section" -->
                <section id="student-info" class="module-section active">
                    <h2>学生信息管理</h2>
                    <form id="student-form">
                        <div class="form-group">
                            <label for="student-id">学号:</label>
                            <input type="text" id="student-id" name="student-id" required>
                        </div>
                        <div class="form-group">
                            <label for="student-name">姓名:</label>
                            <input type="text" id="student-name" name="student-name" required>
                        </div>
                        <div class="form-group">
                            <label for="student-class">班级:</label>
                            <input type="text" id="student-class" name="student-class" required>
                        </div>
                        <button type="submit" id="student-submit-btn">添加学生</button>
                        <button type="submit" id="student-update-btn" style="display: none;">修改学生</button>
                        <button type="button" onclick="cancelEditStudent()">取消</button>
                    </form>
                    <div class="search-box">
                        <input type="text" id="student-search" placeholder="输入学号或姓名查询学生">
                        <button onclick="searchStudents()">查询</button> <!-- 新增查询按钮 -->

                    </div>
                    <div id="student-list"></div>
                </section>
                <section id="teacher-info" class="module-section">
                    <h2>教师信息管理</h2>
                    <form id="teacher-form">
                        <div class="form-group">
                            <label for="teacher-id">编号:</label>
                            <input type="text" id="teacher-id" name="teacher-id" required>
                        </div>
                        <div class="form-group">
                            <label for="teacher-name">姓名:</label>
                            <input type="text" id="teacher-name" name="teacher-name" required>
                        </div>
                        <button type="submit" id="teacher-submit-btn">添加教师</button>
                        <button type="submit" id="teacher-update-btn" style="display: none;">修改教师</button>
                        <button type="button" onclick="cancelEditTeacher()">取消</button>
                    </form>
                    <div class="search-box">
                        <input type="text" id="teacher-search" placeholder="输入编号或姓名查询教师">
                        <button onclick="searchTeachers()">查询</button>
                    </div>
                    <div id="teacher-list"></div>
                </section>
                <section id="course-info" class="module-section">
                    <h2>课程信息管理</h2>
                    <form id="course-form">
                        <div class="form-group">
                            <label for="course-id">课程编号:</label>
                            <input type="text" id="course-id" name="course-id" required>
                        </div>
                        <div class="form-group">
                            <label for="course-name">课程名称:</label>
                            <input type="text" id="course-name" name="course-name" required>
                        </div>
                        <div class="form-group">
                            <label for="credit">学分:</label>
                            <input type="number" id="credit" name="credit" min="1" required>
                        </div>
                        <div class="form-group">
                            <label for="teacher">授课教师:</label>
                            <input type="text" id="teacher" name="teacher" required>
                        </div>
                        <div class="form-buttons">
                            <button type="submit" id="course-submit-btn">添加课程</button>
                            <button type="submit" id="course-update-btn" style="display: none;">修改课程</button>
                            <button type="button" onclick="cancelEditCourse()">取消</button>
                        </div>
                    </form>
                    <div class="search-box">
                        <input type="text" id="course-search" placeholder="输入课程编号或名称">
                        <button onclick="searchCourses()">查询</button>
                    </div>
                    <div id="course-list"></div>
                </section>
                <section id="grade-entry" class="module-section">
                    <h2>成绩录入</h2>
                    <form id="grade-form">
                        <div class="form-group">
                            <label for="course-select">选择课程:</label>
                            <select id="course-select" name="course-select" required>
                                <!-- 课程选项将动态加载到这里 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="student-select">选择学生:</label>
                            <select id="student-select" name="student-select" required>
                                <!-- 学生选项将动态加载到这里 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="grade">成绩:</label>
                            <input type="number" id="grade" name="grade" min="0" max="100" required>
                        </div>
                        <button type="submit">录入成绩</button>
                    </form>

                </section>
                <section id="grade-query" class="module-section">
                    <h2>成绩查询</h2>
                    <form id="query-form">
                        <div class="form-group">
                            <label for="query-student-id">学号:</label>
                            <input type="text" id="query-student-id" name="query-student-id" required>
                        </div>
                        <button type="submit">查询成绩</button>
                    </form>
                    <div id="query-result"></div>
                </section>
                <section id="user-info" class="module-section active">
                    <h2>用户信息管理</h2>
                    <form id="user-form">
                        <div class="form-group">
                            <label for="user-id">用户ID:</label>
                            <input type="text" id="user-id" name="user-id" required>
                        </div>
                        <div class="form-group">
                            <label for="user-username">用户名:</label>
                            <input type="text" id="user-username" name="user-username" required>
                        </div>
                        <div class="form-group">
                            <label for="user-password">密码:</label>
                            <input type="text" id="user-password" name="user-password" required>
                        </div>
                        <div class="form-group">
                            <label for="user-real_name">真实姓名:</label>
                            <input type="text" id="user-real_name" name="user-real_name" required>
                        </div>
                        <div class="form-group">
                            <label for="user-role">角色:</label>
                            <input type="text" id="user-role" name="user-role" required>
                        </div>
                        <button type="submit" id="user-submit-btn">添加用户</button>
                        <button type="submit" id="user-update-btn" style="display: none;">修改用户</button>
                        <button type="button" onclick="cancelEditUser()">取消</button>
                    </form>
                    <div class="search-box">
                        <input type="text" id="user-search" placeholder="输入用户ID或姓名查询用户">
                        <button onclick="searchUsers()">查询</button>
                    </div>
                    <div id="user-list"></div>
                </section>




                <section id="statistics" class="module-section">
                    <!-- 统计分析内容（原有班级科目平均分统计等） -->
                    <div class="container">
                        <h2>班级科目平均分统计</h2>
                        <div class="controls">
                            <select id="classSelector">
                                <option value="17">17班</option>
                                <option value="18">18班</option>
                                <option value="19">19班</option>
                            </select>
                            <button type="button" onclick="loadData()">生成图表</button>
                        </div>
                        <canvas id="scoreChart"></canvas>

                    </div>
                    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
                </section>

            </main>
        </div>
    </div>










    <script src="scripts.js"></script>
</body>

</html>